<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项</title>
    <link rel="stylesheet" href="./styles/main.css">
</head>
<body>
    <div class="todo-container">
        <div class="input-container">
            <textarea id="todo-input" placeholder="可粘贴图片，回车或者点击按钮添加。(shift+enter添加换行)"></textarea>
            <div class="button-row">
                <button id="add-btn">添加</button>
            </div>
        </div>
        <div class="sort-buttons">
            <button id="sort-create-time" class="sort-btn active" data-field="createTime">
                创建时间
                <span class="sort-icon">↓</span>
            </button>
        </div>
        <div id="todo-list">
            <!-- 待办事项将在这里动态添加 -->
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div class="preview-modal">
        <div class="preview-content">
            <img class="preview-image" src="" alt="预览图片">
            <div class="preview-counter"></div>
            <div class="preview-nav">
                <button class="preview-prev">❮</button>
                <button class="preview-next">❯</button>
            </div>
            <button class="preview-close">×</button>
        </div>
    </div>

    <script src="./js/main.js"></script>
</body>
</html> 